<template>
  <div class="planeSorties" :style="showHead ? '' : 'width:100%'" @click.stop>
    <div v-if="showHead" class="title">
      <div class="name"><div class="content">航线</div></div>
      <el-tooltip effect="dark" content="收起" placement="top">
        <img
          src="/img/cockpit/rightClose.png"
          alt=""
          class="closeArrow"
          @click.stop="closeLeft"
        />
      </el-tooltip>
    </div>
    <div class="card">
      <div class="totalLine" :class="{ leftCard: !showHead, isSmall: isSmall }">
        <img src="/img/cockpit/backGreen.png" alt="" />
        <div class="number">
          <div class="icon1"></div>
          {{ totalLine ? totalLine.totalRoutes : 0 }}
        </div>
        <div class="name1">航线总数量</div>
        <div class="arrowDown1"></div>
        <div class="category" :class="{ singleCategory: !showHead }">
          <div class="UAV">
            <div class="num">
              {{ totalLine ? totalLine.airRouteInfos[0].airRouteNumber : 0 }}
            </div>
            <div class="title">无人机</div>
          </div>
          <div class="plane">
            <div class="num">
              {{ totalLine ? totalLine.airRouteInfos[1].airRouteNumber : 0 }}
            </div>
            <div class="title">通航</div>
          </div>
          <div class="plane">
            <div class="num">
              {{ totalLine ? totalLine.airRouteInfos[2].airRouteNumber : 0 }}
            </div>
            <div class="title">其他</div>
          </div>
        </div>
      </div>
      <div
        class="workLine"
        :class="{ rightCard: !showHead, isSmall: isSmall }"
        @click.stop="routeClickHandle('SHENGXIAO')"
      >
        <img src="/img/cockpit/backGreen.png" alt="" />
        <div class="number work">
          <div class="icon"></div>
          {{ currentLine ? currentLine.totalRoutes : 0 }}
        </div>
        <div class="name1 work">生效航线数量</div>
        <div class="arrowDown"></div>
        <div class="category work" :class="{ singleCategory: !showHead }">
          <div class="UAV">
            <div class="num work">
              {{
                currentLine ? currentLine.airRouteInfos[0].airRouteNumber : 0
              }}
            </div>
            <div class="title">无人机</div>
          </div>
          <div class="plane">
            <div class="num work">
              {{
                currentLine ? currentLine.airRouteInfos[1].airRouteNumber : 0
              }}
            </div>
            <div class="title">通航</div>
          </div>
          <div class="plane">
            <div class="num work">
              {{
                currentLine ? currentLine.airRouteInfos[2].airRouteNumber : 0
              }}
            </div>
            <div class="title">其他</div>
          </div>
        </div>
      </div>
      <div
        class="toBeUsedLine"
        :class="{ lastCard: !showHead, isSmall: isSmall }"
        @click.stop="routeClickHandle('DAIYONG')"
      >
        <img src="/img/cockpit/backGreen.png" alt="" />
        <div class="number toBeUse">
          <div class="icon2"></div>
          {{ toBeUseLine ? toBeUseLine.totalRoutes : 0 }}
        </div>
        <div class="name1 toBeUse">待使用数量</div>
        <div class="arrowDown2"></div>
        <div class="category toBeUse" :class="{ singleCategory: !showHead }">
          <div class="UAV">
            <div class="num toBeUse">
              {{
                toBeUseLine ? toBeUseLine.airRouteInfos[0].airRouteNumber : 0
              }}
            </div>
            <div class="title">无人机</div>
          </div>
          <div class="plane">
            <div class="num toBeUse">
              {{
                toBeUseLine ? toBeUseLine.airRouteInfos[1].airRouteNumber : 0
              }}
            </div>
            <div class="title">通航</div>
          </div>
          <div class="plane">
            <div class="num toBeUse">
              {{
                toBeUseLine ? toBeUseLine.airRouteInfos[2].airRouteNumber : 0
              }}
            </div>
            <div class="title">其他</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AirLine",
};
</script>

<script setup>
import useCockpitStore from "@/store/modules/cockpit";
import { computed, defineProps } from "vue";

const props = defineProps({
  showHead: {
    type: Boolean,
    default: true,
  },
  isSmall: {
    type: Boolean,
    default: false,
  },
});

const cockpitStore = useCockpitStore();

const totalLine = computed(() => {
  return cockpitStore.totalLine;
});

const currentLine = computed(() => {
  return cockpitStore.currentLine;
});

const toBeUseLine = computed(() => {
  return cockpitStore.toBeUseLine;
});

const emits = defineEmits(["closeLeft, routeClick"]);

const routeClickHandle = (val) => {
  emits("routeClick", val);
};

const closeLeft = () => {
  emits("closeLeft");
};
</script>

<style scoped lang="scss">
.planeSorties {
  margin-right: 15px;
  width: 528px;
  z-index: 20;
  .title {
    position: relative;
    width: 100%;
    height: 52px;
    display: flex;
    justify-content: space-between;
    // align-items: center;

    .name {
      padding-left: 45px;
      width: 486px;
      height: 48px;
      background: url("/img/cockpit/titleBack.png");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: bottom;

      .content {
        text-align: left;
        font-size: 24px;
        font-family: "YouSheBiaoTiHei";
        font-weight: 400;
        color: rgba(255, 255, 255, 0);
        // text-shadow: 0px 3px 2px #081b1e;

        background: linear-gradient(
          0deg,
          rgba(73, 136, 181, 0.96) 0%,
          rgba(255, 255, 255, 0.96) 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    .closeArrow {
      position: absolute;
      left: 0;
      width: 50px;
      height: 50px;
      top: -9px;
      right: 10px;
      cursor: pointer;
    }
  }

  .card {
    position: relative;
    width: 100%;
    height: 176px;
    background: url("/img/cockpit/cardBack.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    // cursor: pointer;

    .totalLine,
    .workLine,
    .toBeUsedLine {
      //position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: absolute;
      top: 10px;
      width: 158px;
      height: 138px;
    }

    .totalLine.isSmall {
      left: 3%;
      width: 45%;
      img {
        width: 100% !important;
      }
    }

    .workLine.isSmall {
      left: 52%;
      width: 45%;
      img {
        width: 100% !important;
      }
    }

    .totalLine {
      left: 2%;
    }

    .workLine {
      left: 35%;
    }

    .toBeUsedLine {
      left: 68%;
    }

    .leftCard {
      left: 5%;
      width: 173px;

      img {
        width: 170px;
      }
    }
    .rightCard {
      left: 37%;
      width: 173px;

      img {
        width: 170px;
      }
    }

    .lastCard {
      left: 69%;
      width: 173px;

      img {
        width: 170px;
      }
    }

    img {
      width: 100%;
      height: 35px;
    }

    .number {
      position: absolute;
      top: 8px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 26px;
      font-family: DigifaceWide;
      font-weight: 400;
      color: #00f0ff;
      line-height: 32px;
    }

    .icon {
      margin-right: 8px;
      width: 25px;
      height: 25px;
      background: url("/img/cockpit/airLine.png");
      background-repeat: no-repeat;
      background-size: auto;
      background-position: center;
    }

    .icon1 {
      margin-right: 8px;
      width: 25px;
      height: 25px;
      background: url("/img/cockpit/airLine1.png");
      background-repeat: no-repeat;
      background-size: auto;
      background-position: center;
    }

    .icon2 {
      margin-right: 8px;
      width: 25px;
      height: 25px;
      background: url("/img/cockpit/icon2.png");
      background-repeat: no-repeat;
      background-size: auto;
      background-position: center;
    }

    .name1 {
      margin-top: 12px;
      width: 120px;
      height: 18px;
      font-size: 16px;
      text-align: center;
      font-family: PingFang SC;
      font-weight: 400;
      color: #00f0ff;
      line-height: 23px;
    }

    .arrowDown {
      position: absolute;
      top: 80px;
      left: 50%;
      transform: translateX(-50%);
      width: 16px;
      height: 13px;
      background: url("/img/cockpit/arrowDown1.png");
    }

    .arrowDown1 {
      position: absolute;
      top: 80px;
      left: 50%;
      transform: translateX(-50%);
      width: 16px;
      height: 13px;
      background: url("/img/cockpit/arrowDown.png");
    }

    .arrowDown2 {
      position: absolute;
      top: 80px;
      left: 50%;
      transform: translateX(-50%);
      width: 16px;
      height: 13px;
      background: url("/img/cockpit/arrowDown2.png");
    }

    .category {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: absolute;
      bottom: -3%;
      left: 49.5%;
      transform: translateX(-50%);
      width: 109%;
    }

    .singleCategory {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: absolute;
      bottom: -3%;
      left: 49.5%;
      transform: translateX(-50%);
      width: 100%;
    }

    .plane,
    .UAV {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      width: 58px;
      height: 42px;

      .num {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 22px;
        height: 22px;
        font-size: 18px;
        font-family: Myriad Pro;
        font-weight: 400;
        color: #00f0ff;
        line-height: 32px;
      }

      .work {
        color: #54f8bf;
      }

      .toBeUse {
        color: #ffa800;
      }

      .title {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 65px;
        height: 12px;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #ecfefd;
        line-height: 32px;
      }
    }

    .work {
      color: #54f8bf;
    }

    .toBeUse {
      color: #ffa800;
    }
  }
}
</style>
